<template>
    <div>
        <!--  搜索区    -->
        <div>
            <div style="display: flex;justify-content: space-between;margin-bottom: 20px">
                <div>
                    <el-input style="width: 300px;margin-right: 10px"
                              prefix-icon="el-icon-search"
                              v-model="empName"
                              @keydown.enter.native="initPerCIn"
                              clearable
                              @clear="initPerCIn"
                              placeholder="请输入员工名进行搜索..."></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="initPerCIn">搜索
                    </el-button>
                </div>
                <div>
                    <el-button type="primary" icon="el-icon-plus" @click="upWorkView">上班打卡</el-button>
                    <el-button type="primary" icon="el-icon-edit" @click="downWorkView">下班打卡</el-button>
                </div>
            </div>
        </div>
        <!--   表格显示区   -->
        <div>
            <el-table
                    :data="perCIns"
                    border
                    size="mini"
                    stripe>
                <el-table-column
                        type="selection"
                        align="left"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="ID"
                        align="left"
                        fixed
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="workID"
                        label="员工工号"
                        align="left"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="员工姓名"
                        align="left"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="workDate"
                        show-overflow-tooltip
                        label="工作日期"
                        align="left"
                        width="200">
                    <template slot-scope="scope">{{scope.row.workDate | dateyyyyMMddFormat}}</template>
                </el-table-column>
                <el-table-column
                        prop="upWorkDate"
                        label="上班时间"
                        align="left"
                        width="120">
                    <template slot-scope="scope">{{scope.row.upWorkDate | datehhmmssFormat}}</template>
                </el-table-column>
                <el-table-column
                        prop="downWorkDate"
                        label="下班时间"
                        align="left"
                        width="120">
                    <template slot-scope="scope">
                        <span v-if="scope.row.downWorkDate == null">
                            未打卡
                        </span>
                        <span v-else>
                            {{scope.row.downWorkDate | datehhmmssFormat}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="upstate"
                        label="上班状态"
                        align="center"
                        width="120">
                    <template slot-scope="{row: {upstate}}">
                        <span style="background-color: #67C23A;font-size: 16px;color: white" v-if="+upstate === 0">正常</span>   <!--+号转为数字进行全等比较-->
                        <span style="background-color: #F56C6C;font-size: 16px;color: white" v-else>迟到</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="downState"
                        label="下班状态"
                        align="center"
                        width="120">
                    <template slot-scope="{row: {downState}}">
                        <span style="background-color: #67C23A;font-size: 16px;color: white" v-if="downState == null">未打卡</span>   <!--+号转为数字进行全等比较-->
                        <span style="background-color: #67C23A;font-size: 16px;color: white" v-else-if="+downState === 0">正常</span>   <!--+号转为数字进行全等比较-->
                        <span style="background-color: #F56C6C;font-size: 16px;color: white" v-else-if="+downState === 1">早退</span>
                        <span style="background-color: #409EFF;font-size: 16px;color: white" v-else>加班</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="showEditPerCInView(scope.row)">编辑</el-button>
                        <el-button type="danger" @click="deletePerCInView(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--  分页栏      -->
            <div style="display: flex;justify-content: flex-end">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes,prev, pager, next, jumper, ->, total"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PerCIn",
        mounted() {
            this.initPerCIn();
        },
        data(){
            return {
                perCIns:[],
                empName: '', //搜索的员工姓名
                currentPage: 1,
                size: 10,
                total: 0,
                perCin:{  //打卡
                    id: null,
                    workID: '',
                    workDate:'',
                    upWorkDate:'',
                    downWorkDate:'',
                    createDate:'',
                    upstate:null,
                    downState:null
                }
            }
        },
        methods:{
            //初始员工考情信息
            initPerCIn(){
                this.getRequest('/personnel/ec/?currentPage=' + this.currentPage + '&size=' + this.size + '&ename='+this.empName).then(resp =>{
                    if(resp){
                        this.perCIns = resp.data;
                        this.total = resp.total;
                    }
                })
            },
            //currentPage 改变时会触发
            currentChange(currentPage) {
                this.currentPage = currentPage;
                this.initPerTrain();
            },
            //pageSize 改变时会触发
            sizeChange(size) {
                this.size = size;
                this.initPerTrain();
            },
            //编辑
            showEditPerCInView(){

            },
            //删除
            deletePerCInView(data){
                this.$confirm('此操作将永久删除 ' +'【ID:'+ data.id +'姓名：'+data.name + '】 的考勤记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/personnel/ec/'+data.id).then(resp => {
                        if (resp) {
                            this.initPerCIn();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //上班打卡
            upWorkView(){
                console.log(this.$store.state.currentAdmin)
                this.perCin.workID = this.$store.state.currentAdmin.remark; //当前登录的工号
                this.perCin.name = this.$store.state.currentAdmin.name; //姓名
                console.log(this.perCin);
                this.postRequest('/personnel/ec/',this.perCin).then(resp => {
                    if(resp){
                        this.initPerCIn();
                    }
                })
            },
            //下班打卡
            downWorkView(){
                this.perCin.workID = this.$store.state.currentAdmin.remark; //当前登录的工号
                this.perCin.name = this.$store.state.currentAdmin.name; //姓名
                this.putRequest('/personnel/ec/',this.perCin).then(resp => {
                    if(resp){
                        this.initPerCIn();
                    }
                })
            }

        }
    }
</script>

<style scoped>

</style>